---
title: "Table"
description: A high-performance, customizable table component for efficiently displaying large datasets.
order: 5
published: true
references: ["https://react-spectrum.adobe.com/react-aria/Table.html#props"]
---

## Basic
A table displays data in rows and columns, allowing navigation via directional keys. It can optionally support row selection and sorting.
<How isCenter={false} withNoPadding toUse="collections/table/table-demo" />

## Installation
```bash
npx shadcn@latest add @intentui/table
```

## Composed components
<Composed components={['checkbox']}/>

## Manual installation
```bash
npm i react-aria-components @heroicons/react
```

<SourceCode toShow='table'/>

## Anatomy
```
import {
  Table,
  TableBody,
  TableCell,
  TableColumn,
  TableHeader,
  TableRow,
} from "@/components/ui/table"
```

```
<Table aria-label="Bands">
  <TableHeader>
    <TableColumn>#</TableColumn>
    <TableColumn isRowHeader>Name</TableColumn>
  </TableHeader>
  <TableBody>
    <TableRow>
      <TableCell>1</TableCell>
      <TableCell>Nirvana</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>2</TableCell>
      <TableCell>The Beatles</TableCell>
    </TableRow>
  </TableBody>
</Table>
```

## Searchable
In the latest React Aria release, tables can now be made searchable since Autocomplete supports all collection types, including Table This allows users to filter table rows directly with their input.

This example comes from a tweet by Devon [here](https://x.com/devongovett/status/1960184396801015971).
<How isCenter={false} withNoPadding toUse="collections/table/table-with-autocomplete-demo" />

## Bulk Actions
Tables may require bulk actions for handling multiple entries at once.
<How isCenter={false} withNoPadding toUse="collections/table/table-bulk-demo" />

## Drag and Drop
Similar to [GridList](/docs/components/collections/grid-list), tables can also support drag and drop functionality.
<How isCenter={false} withNoPadding toUse="collections/table/table-drag-demo" />

## Sorting
Tables can be made sortable. Activate sorting by clicking on a column header.
<How isCenter={false} withNoPadding toUse="collections/table/table-sorting-demo" />

## Resizable
Tables can be made resizable. To enable resizing, set the `allowResize` prop to `true`. And to make a column resizable, set the `isResizable` prop to `true` on the column.
<How isCenter={false} withNoPadding toUse="collections/table/table-resize-demo" />

## Infinite scrolling
Tables can handle large datasets efficiently with infinite scrolling. This allows for loading more data as the user scrolls down, improving performance and user experience.
<How isCenter={false} withNoPadding toUse="collections/table/table-infinite-scroll-demo" />

## Href
To create a clickable link within a table row, use the `href` prop.

```jsx
<TableRow href='/collections/table-demo'/>
```

## Bleed
Use the `bleed` prop to make the table stretch to the edges of its container. This is especially useful in layouts like sidebars, where you want the table to align with the container's outer padding.

```tsx
<Table bleed className="[--gutter:--spacing(6)] sm:[--gutter:--spacing(4)]" aria-label="..."/>
```

## With Card
When placing a table inside a card, you can use bleed and adjust the `--spacing` variable to align with the card’s padding, allowing the table to span the full width.
<How isCenter={false} withNoPadding toUse="surfaces/card/card-table-demo"/>


See the full demo at [Sidebar 15](/pre-blocks/sidebar/sidebar-15).
